<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理信息系统课程设计 | MISP</title>
    <!-- Freemarker标签-->
    <#include "/inc/head.ftl"/>
    <@head/>   
</head>
<body>
    <div id="wrapper">
        <!-- Navigation -->
        <#include "/inc/nav.ftl"/>
        <@nav/>
        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel-body">
                        <button id="btn-add"  type="button" class="btn btn-success">添加商品</button>
                        <button id="btn-edit"  type="button" class="btn btn-warning">修改商品</button>
                        <button id="btn-del" type="button" class="btn btn-danger">删除商品</button>
                    </div>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">商品列表</div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="list">
                                <thead>
                                    <tr>
                                        <th class="never">ID</th>
                                        <th>商品名称</th>
                                        <th>价格</th>
                                        <th>商品类别</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">                          
                           <h4 class="modal-title" id="myModalLabel"></h4>
                        </div>
                        <div class="modal-body"> 
                            <div class="row">
                                <div class="col-lg-12">
                                    <form id="form" role="form">
                                        <input id="id" name="id" type="hidden" class="form-control">
                                        <div class="form-group">
                                            <label>商品名称</label>
                                            <input id="name" name="name" class="form-control"/>
                                            <p class="help-block"></p>
                                        </div>
                                        <div class="form-group">
                                            <label>价格</label>
                                            <input id="price" name="price" class="form-control"/>
                                            <p class="help-block"></p>
                                        </div>
                                        <div class="form-group">
                                            <label>商品类别</label>
                                            <select id="categoryId" name="categoryId" class="form-control"></select>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id="btn-submit" type="submit" class="btn btn-default">提交</button>
                            <button id="btn-reset" type="reset" class="btn btn-default">重置</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div>          
            </div>
        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- Page-Scripts  -->
    <script>
    $(document).ready(function() {    	
    	var categorys = {};
    	var table;
    	
    	$.getJSON("${contextPath}/goods/category/list", function(result){
    		var data = result.data;
    		for (var i in data) {
    			var c = data[i];
    			categorys[c.id] = c.name;
    			$("#categoryId").append('<option value="'+c.id+'">'+c.name+'</option>');
    		}
    	})
    	.fail(function() {
    		layer.msg('获取商品类别失败！', {icon:2});
    	})
    	.done(initDataTable);
    	
    	function initDataTable() {
    		table = $('#list').DataTable({   //此处list与页面table的id相同
                ajax: '${contextPath}/goods/list',
                language: {
                    "url": "${contextPath}/vendor/datatables/i18n/Chinese.json"   //datatables国际化
                }, 
                columns: [
                    {data: "id"},
                    {data: "name"},
                    {data: "price"},
                    {
                        data: "categoryId",
                        render: function ( data, type, row, meta ) {
                            if (categorys[data] == undefined)
                                return '<lable style="color:red">Error</lable>';
                            return categorys[data];
                        }
                    }
                ],
                ordering: false,
                responsive: true,
                select: true
            });
    	}
                
        var validator = $("#form").validate({
        	onkeyup: function(element) { $(element).valid(); },
        	errorClass: "help-block",
        	submitHandler: function(form) {
        		$("#form").ajaxSubmit({
        			type: "post",
        			url: "${contextPath}/goods/save",
        			dataType: "json",
        			success: function(data) {
        				if(data.result) {
        					layer.msg("添加成功", {time: 1000, icon: 1});
        					$("#myModal").modal("hide");
        					table.ajax.reload();
        				} else
        					layer.msg("添加失败!", {time: 1000, icon: 2});
        			},
        			error: function() {
                        layer.msg("系统出错！", {time: 1000, icon: 2});
                    }
        		})
        	},
        	rules: {
        		name: {
        			required: true,
        			maxlength: 30
        		},
        		price: {
        			required: true,
        			number: true
        		},
        		categoryId: "required"
        	},
        	highlight: function(element) {
        	    $(element).parent().addClass("has-error");
        	},
        	unhighlight: function(element) {
        		$(element).parent().removeClass("has-error");
        	}
        });
        
        /* 表单添加、修改提交按钮 */
        $("#btn-submit").click( function () {
        	$("#form").submit();
        });
        
        /* 添加按钮 */
        $('#btn-add').click( function () {
            resetForm();
            $("#myModalLabel").text("添加商品");
            $('#myModal').modal({keyboard:false,show:true})
        } );
        
        /* 修改按钮 */
        $('#btn-edit').click( function () {
            resetForm();
            var rowData =table.rows( { selected: true } ).data().toArray();
            if(rowData.length==1){
                var row = rowData[0];
                console.log(row);
                $("#id").val(row.id);                          
                $("#name").val(row.name);
                $("#price").val(row.price);
                $("#categoryId").val(row.categoryId);
                $("#myModalLabel").text("修改商品");
                $('#myModal').modal({keyboard:false,show:true})
             } else
                layer.msg('请选择一行!', {time: 1000, icon:7});   //layer弹出层，1000代表1秒后关闭。7为图标编号
        } ); 
        
        /* 删除按钮 */
        $('#btn-del').click( function () {
            var rowData =table.rows( { selected: true } ).data().toArray();  //得到datatables选中行的值并转成数组
            if(rowData.length==1){
                layer.msg('你确定删除该记录吗?', {btn: ['确定', '取消'],yes: function(index){
                    del(rowData[0].id);
                    layer.close(index);
                }});
            }else{
                layer.msg('请选择一行!', {time: 1000, icon:7});
            }
        } ); 
        
        $("#btn-reset").click( function () {
            resetForm();
        } ); 
        
        /* 删除操作 */
        function del(id){
            $.ajax({
                type : "post",
                url : "${contextPath}/goods/delete",
//                 dataType : "json",
                data : {"id": id},
                success : function(data) {
                    if (data.result){
                        layer.msg("删除成功", {time: 1000, icon:1});
                        table.ajax.reload();
                    } else {
                        layer.msg('删除失败！', {time: 1000, icon:2});
                    }
                },
                error : function() {
                    layer.msg('系统出错！', {time: 1000, icon:2});
                }
            });
        }
        
        function resetForm() {
            validator.resetForm();
            $("#form").clearForm();
            $("#form").find(".has-error").removeClass("has-error");
            $("#id").val("");
        }
    });
    </script>
    </body>
</html>
